<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
		<style type="text/css">
			.btn {
				width: 6.25rem;
				height: 2.5rem;
				background-color: aquamarine;
				border-radius: 0.625rem;
				border:none;
			}
			.v-enter, .v-leave-to {
				/*起始动画的隐藏效果*/
				opacity: 0;
				/*x轴300px滑出*/
				transform: translateY(300px);
			}
			.v-enter-active, .v-leave-active {
				/* 入场动画的过度效果 */
				/* transition: opacity 2s; */
				transition: all 2s ease;
			}
			/*离开之后的动画效果*/
			/* .v-leave-to {
				opacity: 0;
				transform: translateY(300px);
			}
			.v-leave {
				transition: all 2s ease;
			} */
			.test2-enter, .test2-leave-to {
				/*起始动画的隐藏效果*/
				opacity: 0;
				/*x轴300px滑出*/
				transform: translateX(300px);
			}
			.test2-enter-active, .test2-leave-active {
				/* 入场动画的过度效果 */
				/* transition: opacity 2s; */
				transition: all 2s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" class="btn" @click="handlerClick" style="width: 6.25rem;height: 2.5rem;">切换</button>
			<transition>
				<h1 v-show='show'>{{ msg }}</h1>
			</transition>
			<button type="button" class="btn" @click="handlerClick2" style="width: 6.25rem;height: 2.5rem;">切换</button>
			<transition name="test2">
				<h1 v-show='show2'>{{ msg }}</h1>
			</transition>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el:"#app",
				data:{
					msg:'wangziyuan good!',
					show:true,
					show2:true
				},
				methods:{
					handlerClick(){
						this.show = !this.show;
					},
					handlerClick2(){
						this.show2 = !this.show2;
					}
				}
			})
		</script>
	</body>
</html>
